<template>
  <div class="login">
    <section class="login-box animated flipInY flex-j-c" v-if="device === 'pc'">
      <div class="login-right">
        <a-form
          ref="FormRef"
          :model="form"
          :style="{ width: '84%' }"
          :label-col-style="{ display: 'none' }"
          :wrapper-col-style="{ flex: 1 }"
        >
          <h3 class="login-form-title"><span>账号登录</span></h3>
          <a-form-item field="username" :rules="[{ required: true, message: '请输入账号' }]">
            <a-input v-model="form.username" placeholder="账号" size="large" allow-clear>
              <template #prefix><icon-user :stroke-width="1" :style="{ fontSize: '20px' }" /></template>
            </a-input>
          </a-form-item>
          <a-form-item field="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model="form.password" placeholder="密码" size="large" @press-enter="login" allow-clear>
              <template #prefix><icon-lock :stroke-width="1" :style="{ fontSize: '20px' }" /></template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-row justify="space-between" align="center" style="width: 100%">
              <a-checkbox v-model="remember">记住密码</a-checkbox>
              <a-link @click="Notification.warning('请联系管理员')">忘记密码</a-link>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-space direction="vertical" fill style="width: 100%">
              <a-button type="primary" size="large" long :loading="loading" @click="login">登录</a-button>
              <a-button size="large" long class="register-btn" @click="Notification.warning('请联系管理员')"
                >注册账号</a-button
              >
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </section>
    <section
      class="login-box w-full h-full pt-36n box-border animated flipInY flex-j-c"
      v-else-if="device === 'mobile'"
    >
      <div class="flex-col w-full box-border px-8n">
        <a-form
          ref="FormRef"
          :model="form"
          :style="{ width: '100%' }"
          :label-col-style="{ display: 'none' }"
          :wrapper-col-style="{ flex: 1 }"
        >
          <div class="text23 text-size-22 ml-auto mr-auto mb-13n letter-spacing2">账号登录</div>
          <a-form-item field="username" :rules="[{ required: true, message: '请输入账号' }]">
            <a-input v-model="form.username" class="h-12n" placeholder="账号" size="large" allow-clear>
              <template #prefix>
                <div class="flex flex-a-c" style="margin-right: -10px;">
                  <img src="@/assets/images/mobile-name.png" class="w-4n h-4n mb-2"></img>
                  <a-divider direction="vertical" />
                </div>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item field="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model="form.password" class="h-12n" placeholder="密码" size="large" @press-enter="login" allow-clear>
              
              <template #prefix>
                <div class="flex flex-a-c" style="margin-right: -10px;">
                  <img src="@/assets/images/mobile-passward.png" class="w-4n h-4n mb-2"></img>
                  <a-divider direction="vertical" />
                </div>
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item class="mt-6n">
            <a-space direction="vertical" fill style="width: 100%">
              <a-button type="primary" shape="round" size="large" long :loading="loading" class="h-9n" @click="login">登录</a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </div>
    </section>
    <GiThemeBtn class="theme-btn"></GiThemeBtn>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store'
import { useLoading } from '@/hooks'
import { Message, Notification } from '@arco-design/web-vue'
import Crypto from '@/utils/encryp.js'
import { userChannelGetInfo } from '@/apis'
import { useAppStore } from '@/store'
// const appStore = useAppStore()
const key = 'e4ea89835ad64eb1b8d76069e33908d4'
const iv = 'ff465fdecc764337'

defineOptions({ name: 'Login' })
const router = useRouter()
const userStore = useUserStore()

const device = ref()
const is_mobi =
  navigator.userAgent
    .toLowerCase()
    .match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null
device.value = is_mobi ? 'mobile' : 'pc'
const form = reactive({
  username: '',
  password: ''
})

const getDetail = () => {
  return new Promise((resolve, reject) => {
    userChannelGetInfo()
      .then((res) => {
        const rewardChannelStr = res.data.isRewardChannel == 1 ? '奖励' : '收益'
        userStore.setRewardChannelStr(rewardChannelStr)
        resolve(true)
      })
      .catch(() => {
        reject()
      })
  })
}

// 记住密码
const remember = ref(true)
// 登录加载
const { loading, setLoading } = useLoading()
const errorMessage = ref('')

const FormRef = ref()

const captchaInfo = ref({
  expired_at: '',
  image_content: '',
  key: ''
})

const loginInfoO = localStorage.getItem('loginInfo')
if (loginInfoO) {
  const loginInfo = JSON.parse(Crypto.decrypt(loginInfoO, key, iv))
  form.username = loginInfo.username
  form.password = loginInfo.password
}

// 点击登录
const login = async () => {
  try {
    const flag = await FormRef.value?.validate()
    if (flag) return
    setLoading(true)
    await userStore.login({ ...form })
    await getDetail()
    router.push('/dashboard')
    setLoading(false)
    if (remember.value) {
      const loginInfo = Crypto.encrypt(
        JSON.stringify({
          username: form.username,
          password: form.password
        }),
        key,
        iv
      )
      localStorage.setItem('loginInfo', loginInfo)
      localStorage.setItem('name', form.username)
      localStorage.setItem('avatar', 'https://images.haofanhuoban.com/decoration/496c0aa11bdc376ef3525437afa92cc3.jpg')
    } else {
      localStorage.setItem('loginInfo', '')
      localStorage.setItem('name', '')
      localStorage.setItem('avatar', '')
    }
    Message.success('登录成功')
  } catch (error) {
    errorMessage.value = error.message
  } finally {
    setLoading(false)
  }
}
</script>

<style lang="scss" scoped>
.register-btn,
.register-btn:hover {
  color: var(--color-text-2);
}

.login-form-title {
  color: var(--color-text-1);
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.theme-btn {
  position: fixed;
  top: 20px;
  left: 30px;
  z-index: 9999;
}

.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0eff2;
  // background-image: url('https://cn.bing.com/th?id=OHR.DjanetAlgeria_ZH-CN3458706695_1920x1080.jpg&rf=LaDigue_1920x1080.jpg');
  background-image: url('https://images.haofanhuoban.com/decoration/a9bc1210716195565c8e749f636544e5.png');
  backdrop-filter: blur(20px);
  &-box {
    height: 380px;
    display: flex;
    z-index: 999;
  }
}

.login-right {
  width: 400px;
  height: 100%;
  background: var(--color-bg-1);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 18px;
  position: relative;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.3) !important;
}
.logo {
  position: fixed;
  top: 20px;
  left: 30%;
  img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
}
.bg-backdrop-layout {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
}
:deep(.arco-input-append) {
  padding: 0 !important;
}

.point {
  cursor: pointer;
}

.text23 {
  color: #232323;
}

.text-size-22 {
  font-size: 22px;
}

.letter-spacing2 {
  letter-spacing: 2px;
}
</style>
